import { normFile, normFileGetVal } from '@/components/BuildForm';
import { CONFIG } from '@/constants';
import { saveRate } from '@/servers/api/order';
import { PlusOutlined } from '@ant-design/icons';
import { FormattedMessage, history, useIntl, useLocation } from '@umijs/max';
import { Button, Form, Input, Rate, Upload, message } from 'antd';
type IParams = {
    order_id: number;
    order_no: string;
    show_desire_price: string;
    type: string;
};
const Evaluation: React.FC = () => {
    const location = useLocation();
    const intl = useIntl();
    console.log(location);
    const state = location.state as IParams;
    function onFinish(e) {
        let data = {
            order_id: state.order_id, //订单id
            ...e,
        };
        saveRate(data).then(() => {
            message.success(intl.formatMessage({ id: '评价成功' }));
            history.push('/order');
        });
    }
    const uploadButton = (
        <button style={{ border: 0, background: 'none' }} type="button">
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
        </button>
    );
    const beforeUpload = (file: any) => {
        const isJpgOrPng =
            file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
    };
    return (
        <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            autoComplete="off"
        >
            <Form.Item label={intl.formatMessage({ id: '订单编号' })}>
                {state.order_no}
            </Form.Item>
            <Form.Item label={intl.formatMessage({ id: '求购询单价' })}>
                {state.show_desire_price}
            </Form.Item>
            <Form.Item
                label={intl.formatMessage({ id: '综合评价' })}
                name="total_score"
                rules={[{ required: true }]}
            >
                <Rate />
            </Form.Item>
            <Form.Item
                label={intl.formatMessage({ id: '评价内容' })}
                name="content"
                rules={[{ required: true }]}
            >
                <Input
                    placeholder={intl.formatMessage({ id: '请输入评价内容' })}
                />
            </Form.Item>
            <Form.Item
                label={intl.formatMessage({ id: '请上传图片' })}
                name="images"
                rules={[{ required: true }]}
                valuePropName="fileList"
                getValueFromEvent={normFile}
                getValueProps={normFileGetVal}
            >
                <Upload
                    listType="picture-card"
                    maxCount={6}
                    beforeUpload={beforeUpload}
                    action={CONFIG.HTTP_REQUEST_URL + '/common/upload'}
                >
                    {uploadButton}
                </Upload>
            </Form.Item>
            <Form.Item
                label={intl.formatMessage({ id: '服务态度' })}
                name="service_score"
                rules={[{ required: true }]}
            >
                <Rate />
            </Form.Item>
            {state.type === '1' && (
                <Form.Item
                    label={intl.formatMessage({ id: '产品质量' })}
                    name="product_score"
                    rules={[{ required: true }]}
                >
                    <Rate />
                </Form.Item>
            )}
            {state.type === '1' && (
                <Form.Item
                    label={intl.formatMessage({ id: '产品价格' })}
                    name="price_score"
                    rules={[{ required: true }]}
                >
                    <Rate />
                </Form.Item>
            )}
            {state.type === '1' && (
                <Form.Item
                    label={intl.formatMessage({ id: '发货速度' })}
                    name="goods_speed_score"
                    rules={[{ required: true }]}
                >
                    <Rate />
                </Form.Item>
            )}
            <Form.Item
                label={intl.formatMessage({ id: '诚信度' })}
                name="integrity_score"
                rules={[{ required: true }]}
            >
                <Rate />
            </Form.Item>
            {state.type === '2' && (
                <Form.Item
                    label={intl.formatMessage({ id: '付款速度' })}
                    name="pay_speed_score"
                    rules={[{ required: true }]}
                >
                    <Rate />
                </Form.Item>
            )}
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    <FormattedMessage id="发布评价"></FormattedMessage>
                </Button>
            </Form.Item>
        </Form>
    );
};
export default Evaluation;
